<script setup lang="ts">
import { ToMember } from '@/helper'
import { configKey, useConfigKeyZTB, useLogout } from '@fl/api/bidding-api/current'
import { clearToken } from '@fl/logics/authentication'
import { resetAllStores } from '@fl/store'
import { useUserStore } from '@fl/store/modules/user'

const userStore = useUserStore()

const { push } = useRouter()
const { data } = useConfigKeyZTB()
const { refetch: logout } = useLogout()
const userIsLogin = computed(() => {
    return Boolean(userStore.userInfo)
})
async function loginOut() {
    await logout()
    clearToken()
    resetAllStores().all()
    push('/')
}

function toZtb() {
    if (hasToZtb.value) {
        push({ path: '/authentication/agreement' })
    }
    else {
        window.location.href = `${data.value.msg}/login?redirect=${encodeURIComponent(window.location.href)}`
    }
}

// 是否需要显示企业认证按钮
const hasToZtb = computed(() => {
    return userStore!.getUserInfo.userTypeCategory === '游客'
})
// 公司
const companyName = computed(() => {
    if (userStore!.getUserInfo?.business && userStore!.getUserInfo?.business.length > 0) {
        return (userStore!.getUserInfo?.business[0] as any).companyName
    }
    return null
})

// const { data: memberUrl, refetch: memberUrlRefetch } = useConfigKeyMember()
const memberUrl = ref('')
const showUserInfoDialog = ref(false)

onMounted(async () => {
    console.log('是否登录', userIsLogin.value)
    if (userIsLogin.value) {
        const result = await configKey('ajl_member_url')
        console.log(result, 'result')
        memberUrl.value = result.msg

        console.log(userStore?.userInfo)
    }
})
async function menberHandler() {
    ToMember()
}
async function toProfile() {
    window.location.href = `${data.value.msg}/user/profile`
}
</script>

<template>
    <!-- <div>{{ userStore.getUserInfo }}</div> -->
    <el-button v-if="hasToZtb"
               style="height: 40px;"
               @click="toZtb"
    >
        企业认证
    </el-button>

    <el-button v-else
               style="height: 40px;"
               @click="toZtb"
    >
        招投标后台
    </el-button>

    <div class="mx-10px flex flex-none relative h-full items-center">
        <div class="cursor-pointer"
             @click="showUserInfoDialog = !showUserInfoDialog"
        >
            <span class="<lg:hidden pl-[5px] mr-5px text-14px text-[var(--top-header-text-color)]">
                {{ userStore.getUserInfo?.nickName }}
            </span>
        </div>

        <div v-if="showUserInfoDialog"
             class="user-box"
             style="top: 80px;"
        >
            <div class="mb-20 flex justify-between items-center">
                <div class="text-20 font-bold">
                    {{ userStore.getUserInfo?.nickName }}
                </div>

                <div class="text-16 cursor-pointer hover:text-red-500"
                     @click="loginOut"
                >
                    退出 <div class="i-material-symbols:logout" />
                </div>
            </div>

            <div v-if="companyName"
                 class="enterprise-box mb-20 font-500 flex items-center"
            >
                {{ companyName }} <memberTag class="ml-10px"
                                             @click="menberHandler"
                />
                <!--                {{ userStore?.userInfo?.userTypeCategory }} -->
            </div>

            <div class="text-16 flex">
                <div class="flex-1 cursor-pointer hover:text-blue"
                     @click="toProfile"
                >
                    <div class="i-material-symbols:verified-user-outline h-1em w-1em" /> 账号设置
                </div>
            </div>
        </div>
    </div>

    <memberTag @click="menberHandler" />
</template>

<style scoped lang="less">
.user-box {
    position: fixed;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 452px;
    right: 0;
}

.enterprise-box {
    background-color: #f0f3f7;
    padding: 8px 16px;
    border-radius: 4px;
    color: #6186bc;
}

.fade-bottom-enter-active,
.fade-bottom-leave-active {
    transition:
        opacity 0.25s,
        transform 0.3s;
}

.fade-bottom-enter-from {
    opacity: 0;
    transform: translateY(-10%);
}

.fade-bottom-leave-to {
    opacity: 0;
    transform: translateY(10%);
}
</style>
